import React, { useState } from 'react'
import { Button, DatePicker, Spin, Switch, Table } from 'antd'
import './index.css'

const { RangePicker } = DatePicker

const columns = [
  {
    title: '项目',
    dataIndex: 'projectName',
    key: 'projectName'
  },
  {
    title: '工时',
    dataIndex: 'time',
    key: 'time'
  },
  {
    title: '工作内容',
    dataIndex: 'aiContent',
    key: 'aiContent'
  }
]

function Index(props) {
  const [tableData, setTableData] = useState([])
  const [dateRange, setDateRange] = useState({
    startDate: '',
    endDate: ''
  })

  function dateChange(date, dateString) {
    setDateRange({
      startDate: dateString[0],
      endDate: dateString[1]
    })
  }

  const [loading, setLoading] = useState(false)
  const [aiSummary, setAiSummary] = useState(false)

  async function search() {
    try {
      setLoading(true)
      let res = await window.electron.ipcRenderer.invoke('statistics-list', {
        ...dateRange,
        aiSummary
      })
      // res.map(item => {
      //   if(item.aiContent.startsWith(" ")){
      //     item.aiContent = item.aiContent.replace(' ', '')
      //   }
      //   item.aiContent = handleResult(item.aiContent).replace(/&#92n/g, '\n')
      //   return item
      // })
      setTableData(res)
    } catch (e) {
      console.log(e)
    } finally {
      setLoading(false)
    }
  }

  return (
    <div>
      <div className={'mb-4 flex justify-end gap-2 items-center'}>
        {/*<Button onClick={test}>test</Button>*/}
        <Switch checkedChildren="ai总结" unCheckedChildren="关闭总结" onChange={(checked) => {
            setAiSummary(checked)
        }} />
        <RangePicker onChange={dateChange}></RangePicker>
        <Button onClick={search}>搜索</Button>
      </div>
      <Spin spinning={loading} delay={500}>
        <Table columns={columns} dataSource={tableData} bordered rowKey={'projectId'} />
      </Spin>
    </div>
  )
}

export default Index
